<template>
	<view class="login_content ">

		<view class="text-center mt-5 px-5 bg-white relative z-index-3">
			<view class="font-bold mb-4 text-center font-38 pb-3">
				欢迎登录
			</view>
			<image class="rounded-15" src="/static/images/logo.png" mode="widthFix"
				style="width: 200rpx;height: 200rpx;" />

			<view class="flex justify-center items-center mb-3 mt-5 pt-3">
				<u-checkbox-group v-model="checkboxValue1" placement="column">
					<u-checkbox activeColor="#55aaff" shape="circle" size="18" labelSize="14" labelColor="#999"
						v-for="(item, index) in checkboxList1" :key="index" :name="item.name" :label="item.name">
					</u-checkbox>
				</u-checkbox-group>
				<!-- <view class="font-24 text-secondary">我已阅读并同意</view> -->
				<view class="font-24 text-primary" @click="getDeclarations">《隐私协议》</view>
			</view>
			<view style="height: 100rpx;"></view>
			<view class="h-90 rounded-60 bg-primary flex justify-center items-center">
				<button v-if="checkboxValue1.length==0" class="w100 text-white h-90 font-28"
					style="background-color: transparent;line-height: 90rpx;" type="primary"
					@click="handleLogin">一键登录</button>
				<button v-else class="w100 text-white h-90 font-28"
					style="background-color: transparent;line-height: 90rpx;" type="primary" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">一键登录</button>
			</view>

		</view>

		<u-popup :show="showDeclarations" mode="bottom" :round="10" @close="showDeclarations=false" :closeable="true">
			<view class="bg-white p-3">
				<view class="font-36 font-bold text-center mb-3">隐私协议</view>
				<view style="max-height: 70vh;overflow-y: auto;min-height: 20vh;">
					<u-parse :content="detailContent"></u-parse>
				</view>
			</view>
		</u-popup>

	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		codeMsg,
		userInfos,
		declarations
	} from '@/api/login.js'
	export default {
		components: {},
		computed: {
			...mapState(["userInfo"]),
		},
		data() {
			return {
				checkboxValue1: [],
				checkboxList1: [{
					name: "我已阅读并同意",
				}, ],
				queryParams: {
					clientId: '719decca6cfdaf941f47b060a99a8829',
					grantType: 'xcx',
					phonenumber: '',
					xcxCode: ''
				},
				showDeclarations: false,
				detailContent: ''

			};
		},
		onPageScroll(e) {},
		async onLoad() {
			await this.$onLaunched;
		},
		async onShow() {
			await this.$onLaunched;
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 400);
		},
		methods: {
			handleLogin() {
				if (this.checkboxValue1.length == 0) {
					uni.$u.toast('请先阅读并同意隐私协议');
				}
			},
			getPhoneNumber(e) {
				uni.login({
					provider: "weixin",
					success: res => {
						console.log(res, '===uni.login')
						console.log(e, "===getPhoneNumber");
						if (e.detail.errMsg == "getPhoneNumber:ok") {
							uni.showLoading({
								title: '授权中'
							})
							codeMsg({
								code: res.code,
								iv: e.detail.iv,
								encryptedData: e.detail.encryptedData,
								phoneOs: this.systemInfo.osName,
								phoneModel: this.systemInfo.deviceModel
							}).then(resc => {
								uni.setStorageSync('phone', resc.data.phone);
								uni.setStorageSync('token', resc.data.accessToken);
								this.getUserInfos();
							})
						} else {
							uni.showToast({
								title: "您拒绝了手机号授权",
								icon: "none",
							});
						}
					}
				})

			},
			getUserInfos() {
				userInfos({}).then(res => {
					uni.$u.toast('登录成功');
					uni.hideLoading()
					this.$store.commit('setUserInfo', res.data.info ? res.data.info : res.data);
					uni.showToast({
						title: "登录成功",
						icon: "success",
						duration: 600,
						complete: () => {
							this.reLaunch('/pages/index/index')
						}
					});
				})
			},
			getDeclarations() {
				declarations({
					declarationType: 0
				}).then(res => {
					this.showDeclarations = true;
					this.detailContent = res.data.declaration
				})
			}
		},
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}

	.login_content {
		padding: 170rpx 30rpx 0;
	}
</style>